<template>
  <div style="width: 280mm;">
    <PrintDetail v-if="printData?.printType === 'detail'" :data="printData" />
    <PrintSummary v-if="printData?.printType === 'summary'" :data="printData" />
    <div class="btn-wrap">
      <button class="btn-print" @click="printHtml">打 印</button>
      <button class="btn-print" @click="back">返 回</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue"
import IpcDict from "@/constants/ipc-dict"
import PrintDetail from "@/views/PrintDetail.vue";
import PrintSummary from "@/views/PrintSummary.vue";

const back = () => {
  window.vIpcRenderer.send(IpcDict.CLOSE)
}
const printHtml = () => {
  window.vIpcRenderer.send(IpcDict.PRINT)
}

const printData = reactive({})
onMounted(() => {
  const payload = window.location.href.split("payload=")[1]
  if (payload) {
    try {
      const data = JSON.parse(decodeURIComponent(payload)) // Base64 解码 + JSON 还原
      Object.assign(printData, data)
    } catch (e) {
      console.error("解析参数失败", e)
    }
  }
})
</script>

<style>
body {
  text-align: center;
  background-color: white !important;
  margin-top: 10mm;
  margin-left: 10mm;
  line-height: 1.5;
  overflow: hidden;
}

.btn-wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 60px;
  margin-left: -20mm;
}
.btn-print {
  padding: 5px 20px;
}
@media print {
  body {
    margin-top: 0;
    margin-left: 10mm;
  }

  /* 打印时隐藏不需要的元素 */
  .btn-wrap {
    display: none;
  }
}
</style>
